<template>

  <div class="container">
    <div >
      <span class="demonstration">年份:</span>
      <el-date-picker
          v-model="selectedYear"
          type="year"
          placeholder="选择年份"
      />
    </div>


  <el-row :gutter="20">
    <el-col :span="6"><div class="grid-content ep-bg-purple"  >


      <button class="btn-53" @click="selectJan" >
      <div class="original" style="background-color: #42b983"> 一月</div>
      <div class="letters">
        <span >一</span>
        <span>月</span>
      </div>
    </button>


      <button class="btn-53" @click="selectFeb">
        <div class="original" style="background-color: #00AEEc">二月</div>
        <div class="letters">
          <span>二</span>
          <span>月</span>
        </div></button>

      <button class="btn-53" @click="selectMar">
        <div class="original" style="background-color: rgba(189,36,146,0.45)">三月</div>
        <div class="letters">
          <span>三</span>
          <span>月</span>
        </div></button>
    </div></el-col>
    <el-col :span="6"><div class="grid-content ep-bg-purple" >
      <button class="btn-53" @click="selectApr">
      <div class="original" style="background-color: #c6b332">四月</div>
      <div class="letters">
        <span>四</span>
        <span>月</span>
      </div> </button>

      <button class="btn-53" @click="selectMay">
        <div class="original" style="background-color: #934293">五月</div>
        <div class="letters">
          <span>五</span>
          <span>月</span>
        </div></button>

      <button class="btn-53" @click="selectJun">
        <div class="original" style="background-color: #d2691e">六月</div>
        <div class="letters">
          <span>六</span>
          <span>月</span>
        </div></button></div></el-col>
    <el-col :span="6"><div class="grid-content ep-bg-purple" >
      <button class="btn-53" @click="selectJul">
        <div class="original" style="background-color: #6495ed">七月</div>
        <div class="letters">
          <span>七</span>
          <span>月</span>
        </div></button>

      <button class="btn-53" @click="selectApr">
        <div class="original" style="background-color: #beedc7">八月</div>
        <div class="letters">
          <span>八</span>
          <span>月</span>
        </div></button>

      <button class="btn-53" @click="selectSep">
        <div class="original" style="background-color: #deb887">九月</div>
        <div class="letters">
          <span>九</span>
          <span>月</span>
        </div></button>
    </div></el-col>
    <el-col :span="6"><div class="grid-content ep-bg-purple" >
      <button class="btn-53" @click="selectOct">
        <div class="original" style="background-color: #a0eee1">十月</div>
        <div class="letters">
          <span>十</span>
          <span>月</span>
        </div></button>

      <button class="btn-53" @click="selectNov">
        <div class="original" style="background-color: #e6ceac">十一月</div>
        <div class="letters">
          <span>十</span>
          <span>一</span>
          <span>月</span>
        </div></button>

      <button class="btn-53" @click="selectDec">
        <div class="original" style="background-color: #f46060" >十二月</div>
        <div class="letters">
          <span>十</span>
          <span>二</span>
          <span>月</span>
        </div></button>
    </div> </el-col>
  </el-row>
  </div>

<!--  新建/修改 工资表弹窗-->
  <el-dialog v-model="dialogVisible" :title="dialogTitle"
             :before-close="handleClose"  style="width:1200px;padding:40px;">
    <el-table :date="AddSalary" style="width:100%;">
      <el-table-column label="编号" prop="id" width="80" align="center"/>
      <el-table-column label="姓名" prop="name" align="center"/>
      <el-table-column label="手机号" prop="phone" width="80" align="center"/>
      <el-table-column label="基本工资" prop="basicSalary" align="center"/>
      <el-table-column label="失业保险" prop="unemploymentBenefits" align="center"/>
      <el-table-column label="医疗保险" prop="medicalInsurance" align="center"/>
      <el-table-column label="养老保险" prop="oldAgePension" align="center"/>
      <el-table-column label="公积金" prop="accumulationFund" align="center"/>
      <el-table-column label="个人所得税" prop="individualIncomeTax" align="center"/>
      <el-table-column label="奖金" prop="bonus" align="center"/>
      <el-table-column label="补贴" prop="subsidy" align="center"/>
      <el-table-column label="扣除" prop="deduction" align="center"/>
      <el-table-column label="工资总额" prop="totalSalary" align="center"/>
    </el-table>
  </el-dialog>







</template>
<script setup>

import { ref } from 'vue'

// 查看详情弹框
const dialogVisible = ref(false);
// 弹框标题
const dialogTitle = ref('新增/更改每月工资表');
//完善关闭弹窗功能
const handleClose = ()=>{
  if(confirm('您确认要关闭本弹窗吗?')){
    //关闭弹窗
    dialogVisible.value = false;
    //清空已输入的表单数据
    addForm.value = {}
  }
}


//绑定年份选择事件
const selectedYear = ref('');













//绑定一月点击查询事件
const selectJan = () => {
  console.log(selectedYear.value)



}
// //绑定二月查询事件
// const selectFeb = () => {
//
// }
// //绑定三月查询事件
// const selectMar = () => {
//
// }
// //绑定四月查询事件
// const selectApr = () => {
//
// }
// //绑定五月查询事件
// const selectMay = () => {
//
// }
// //绑定六月查询事件
// const selectJun = () => {
//
// }
// //绑定七月查询事件
// const selectJul = () => {
//
// }
// //绑定八月查询事件
// const selectAug = () => {
//
// }
// //绑定九月查询事件
// const selectSep = () => {
//
// }
// //绑定十月查询事件
// const selectOct = () => {
//
// }
// //绑定十一月查询事件
// const selectNov = () => {
//
// }
// //绑定十二月查询事件
// const selectDec = () => {
//
// }





</script>











<style scoped>

.btn-53,
.btn-53 *,
.btn-53 :after,
.btn-53 :before,
.btn-53:after,
.btn-53:before{
  border: 0 solid;
  box-sizing: border-box;
}

.btn-53 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
  Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
  Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  line-height: 1.5;
  margin: 0;

  padding: 0;
}

.btn-53:disabled {
  cursor: default;
}

.btn-53:-moz-focusring {
  outline: auto;
}

.btn-53 svg {
  display: block;
  vertical-align: middle;
}

.btn-53 [hidden] {
  display: none;
}

.btn-53 {
  border: 1px solid;
  border-radius: 999px;
  box-sizing: border-box;
  display: block;
  font-weight: 900;
  overflow: hidden;
  padding: 1.2rem 3rem;
  position: relative;
  text-transform: uppercase;
}

.btn-53 .original {
  background: #fff;
  color: #000;
  display: grid;
  inset: 0;
  place-content: center;
  position: absolute;
  transition: transform 0.2s cubic-bezier(0.87, 0, 0.13, 1);
}

.btn-53:hover .original {
  transform: translateY(100%);
}

.btn-53 .letters {
  display: inline-flex;
}

.btn-53 span {
  opacity: 0;
  transform: translateY(-15px);
  transition: transform 0.2s cubic-bezier(0.87, 0, 0.13, 1), opacity 0.2s;
}

.btn-53 span:nth-child(2n) {
  transform: translateY(15px);
}

.btn-53:hover span {
  opacity: 1;
  transform: translateY(0);
}

.btn-53:hover span:nth-child(2) {
  transition-delay: 0.1s;
}

.btn-53:hover span:nth-child(3) {
  transition-delay: 0.2s;
}


</style>